<template>
  <div>
    <PageHeader hidden-breadcrumb>
        <template #title><div class="demo-title">基础列表</div></template>
        <template #content>
          <div class="demo-content">标准的列表，包含增删改查等基础操作。</div>
        </template>
    </PageHeader>
    <Card style="margin:20px;">
        <Row style="text-align:center">
            <i-col :lg="8">
                <p>进行中的任务</p>
                <p style="font-size: 24px;">10个任务</p>
                </i-col>
                <i-col :lg="8">
                <p>已完成的任务</p>
                <p style="font-size: 24px;">3个任务</p>
                </i-col>
                <i-col :lg="8">
                <p>任务总耗时</p>
                <p style="font-size: 24px;">220个小时</p>
            </i-col>
        </Row>
    </Card>

    <Card title="基础列表" style="margin:20px;">
        <template #extra>
            <RadioGroup v-model="button2" type="button">
            <Radio label="全部"></Radio>
            <Radio label="进行中"></Radio>
            <Radio label="已完成"></Radio>
            </RadioGroup>
            <Input placeholder="请输入..." style="width: 200px;margin-left:5px;" >
                <template #suffix><Icon type="ios-search" /></template>
            </Input>
        </template>
        <Table :show-header="showHeader" :columns="columns" :data="data" style="margin-top:16px;">
            <template #image="{ row }">
                <div class="ivu-list-item-meta"  style="padding:10px;">
                <div class="ivu-list-item-meta-avatar">
                    <span class="ivu-avatar ivu-avatar-square ivu-avatar-image ivu-avatar-large">
                        <img :src="row.image">
                    </span>
                </div>
                <div class="ivu-list-item-meta-content">
                    <div class="ivu-list-item-meta-title">
                    {{ row.name }}
                    </div>
                    <div class="ivu-list-item-meta-description">
                    {{ row.desc }}
                    </div>
                </div>
                </div>
            </template>
            <template #name="{ row }">
                <div>负责人</div>
                <div>{{ row.author }}</div>
            </template>
            <template #time="{ row }">
                <div>开始时间</div>
                <div>{{ row.time }}</div>
            </template>
            <template #persent="{ row }">
                <Progress :percent="row.persent"/>
            </template>
            <template #action="{ row, index }">
                <Button type="text" size="small" style="margin-right: 5px" @click="show(index)"><a>编辑</a></Button>
                <Button type="text" size="small" @click="remove(index)"><a>删除</a></Button>
            </template>
        </Table>
    </Card>
  </div>
</template>

<script>
export default {
    data () {
        return {
            showHeader:false,
            button2:'',
            columns: [
                {
                    title: 'Name',
                    slot: 'image',
                    minWidth: 700,
                },
                {
                    title: 'Name',
                    slot: 'name',
                    minWidth: 100,
                },
                {
                    title: 'Address',
                    slot: 'time',
                    minWidth: 155,
                },
                {
                    title: 'Address',
                    slot: 'persent',
                    minWidth: 200,
                },
                {
                    title: 'Action',
                    slot: 'action',
                    width: 150,
                    align: 'center'
                }
            ],
            data: [
                {
                    image:'https://dev-file.iviewui.com/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd/avatar',
                    desc:'基于 iView 的企业级中后台系统',
                    name: 'view-ui-admin-pro',
                    author: 'admin',
                    time: '2022-07-08 11:01:05',
                    persent: 56
                },
                {
                    image:'https://dev-file.iviewui.com/fAenQ8nvRjL7x0i0jEfuDBZHvJfHf3v6/avatar',
                    desc:'基于 iView 的企业级中后台系统',
                    name: 'view-ui-admin-pro',
                    author: 'admin',
                    time: '2022-07-08 11:01:05',
                    persent: 100
                },
                {
                    image:'https://dev-file.iviewui.com/ttkIjNPlVDuv4lUTvRX8GIlM2QqSe0jg/avatar',
                    desc:'基于 iView 的企业级中后台系统',
                    name: 'view-ui-admin-pro',
                    author: 'admin',
                    time: '2022-07-08 11:01:05',
                    persent: 88
                },
                {
                    image:'https://dev-file.iviewui.com/4Z0QR2L0J1XStxBh99jVJ8qLfsGsOgjU/avatar',
                    desc:'基于 iView 的企业级中后台系统',
                    name: 'view-ui-admin-pro',
                    author: 'admin',
                    time: '2022-07-08 11:01:05',
                    persent: 26
                }
            ]
        }
    },
    methods: {
        show (index) {
            this.$Modal.info({
                title: 'User Info',
                content: `Name：${this.data[index].name}<br>Age：${this.data[index].age}<br>Address：${this.data[index].address}`
            })
        },
        remove (index) {
            this.data.splice(index, 1);
        }
}
}
</script>
